import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
import { HomeBox } from "./style"
import homeTabBarCenter from '@/config/homeTabBarCenter';

class Home extends Component {
  state = {
    selectedTab: 'cookbook',
  };

  render() {
    return (
      <HomeBox>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#333"
          barTintColor="white"
        >
          {
            homeTabBarCenter.map(({ title, key, icon, selectedIcon, cmp }) => (
              <TabBar.Item
                title={title}
                key={key}
                icon={<div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${icon}) center center /  21px 21px no-repeat`
                }} />}
                selectedIcon={<div style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${selectedIcon}) center center /  21px 21px no-repeat`
                }} />}
                selected={this.state.selectedTab === key}
                onPress={() => {
                  this.setState({
                    selectedTab: key,
                  });
                }}
              >
                {cmp}
              </TabBar.Item>
            ))
          }
        </TabBar>
      </HomeBox>
    );
  }
}

export default Home;
